<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/png/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance } from 'vue'; // 全局属性
import { useRoute, useRouter } from 'vue-router';
import { ref, reactive, watch, computed, onMounted } from 'vue';
import HelloWorld from '../components/HelloWorld.vue'; // 如果项目不是在工作区根路径，则路径报错（插件vetur的问题）
const xx = getCurrentInstance()?.appContext.config.globalProperties.$xx;
// ref
const a = ref(1);
const b = ref<number | string>(1);
const arr1 = ref<number[]>([1, 2, 3]);
// reactive
const arr2: number[] = reactive([1, 2, 3]);
interface ObjType {
  a: number;
  b: number;
}
const obj: ObjType = reactive({ a: 1, b: 2 });
// 计算属性
const double = computed(() => a.value * 2);
// watch
watch(a, (newVal, oldVal) => {
  console.log(newVal, oldVal);
});
watch([a, b], ([newA, newB], [oldA, oldB]) => {
  console.log(newA, newB, oldA, oldB);
});
// 方法
const add = (a: number, b: number): number => a + b;
// 生命周期
onMounted(() => {
  console.log(xx);
  console.log(a.value);
  console.log(b.value);
  console.log(obj.a);
  console.log(double.value);
  console.log(add(1, 2));
});
// 路由
const route = useRoute();
const router = useRouter();
// router.push('/about');
// route.query、route.params
// 路由守卫
router.beforeEach((to, from, next) => {
  console.log(to, from);
  next();
});
</script>
